/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 11:28:36
 * @Description: 首页-应用工具-企业信息检索-搜索结果页
 */
import React from "react";
import "./style.scss";
import { observer, inject } from "mobx-react";
import { message, Pagination } from "antd";

@inject("EnterpriseInformationRetrievalStore")
@observer
class EIRResult extends React.Component {
    componentDidMount() {
        // 判断是否有 搜索关键词  没有应该返回搜索主页
        this.getListData();
    }
    getListData() {
        this.props.EnterpriseInformationRetrievalStore.getResultListData();
    }
    handleKeyUp = e => {
        if (e.keyCode !== 13) {
            // 绑定回车键事件
            return false;
        }
        this.getListData();
    };
    handleChange = e => {
        this.props.EnterpriseInformationRetrievalStore.changeKeyWords(e.target.value.trim());
    };
    handleChangeFocus() {
        message.info("发送更改关注状态的请求");
    }
    showDetail(id) {
        this.props.EnterpriseInformationRetrievalStore.setDetailId(id);
        this.props.history.push("/main/home/enterpriseInformationRetrieval/details");
    }
    render() {
        const {
            resultListData: { count = 0, lists = [] },
            keyWords
        } = this.props.EnterpriseInformationRetrievalStore;
        return (
            <div className="EIR-result">
                <div className="top-search">
                    <input
                        type="text"
                        className="search-text"
                        value={keyWords}
                        onChange={this.handleChange}
                        onKeyUp={this.handleKeyUp}
                    />
                    <span
                        className="btn"
                        onClick={() => this.props.EnterpriseInformationRetrievalStore.getResultListData()}
                    >
                        搜索
                    </span>
                </div>
                <div className="count">
                    共找到<span>{count}</span>家企业
                </div>
                <ul className="item-lists">
                    {/* index 可以换成 id */}
                    {lists && lists.length > 0 ? (
                        lists.map((item, index) => (
                            <li key={`eiRetrieval-${index}`} className="item">
                                <div className="left">
                                    <img src={item.logo} alt="" className="logo" />
                                </div>
                                <div className="right">
                                    <div className="name" onClick={() => this.showDetail(item.id)}>
                                        {item.name}
                                    </div>
                                    <div className="info-item">
                                        <span>统一社会信用代码 {item.code}</span>
                                        <span>法定代表人 {item.person}</span>
                                        <span>注册日期 {item.time}</span>
                                        <span>住所 {item.address}</span>
                                    </div>
                                    <div className="foot">
                                        <span>关联APP</span>
                                        {item.relations.map((d, i) => (
                                            <span className="tip" key={`relation-${i}`}>
                                                {d}
                                            </span>
                                        ))}
                                    </div>
                                </div>
                            </li>
                        ))
                    ) : (
                        <div>暂无数据，请搜索</div>
                    )}
                </ul>
                <div className="common-pagination">
                    <Pagination
                        defaultcurrent={6}
                        total={500}
                        onChange={page => this.props.EnterpriseInformationRetrievalStore.changePage(page)}
                    />
                </div>
            </div>
        );
    }
}

export default EIRResult;
